<!-- 我的 -->
<template>
	<view class="my">
		<!-- 登录 -->
		<view style="height: 13vw;"></view>
		<view class="center-login" v-if="data.viptoken">
			<view style="">
				<img src="static/myIcon.jpg" alt=""
					style="width: 15vw;margin-right: 10vw;border-radius: 10vw;margin-left: 5vw; ">
			</view>
			<view class="center-login-left">
				<view class="name">姓名：{{ data.username }}</view>
				<view class="name">账号：{{ data.vipShouJiNum }}</view>
			</view>
		</view>
		<view class="center" v-else>
			<u-button type="primary" @click="login">登录</u-button>
		</view>
		<view class="indent">
			<view class="indent-text" @click="goSet('set')">
				<img src="static/setting.png" alt="" style="width: 5vw;margin-right: 2vw;">
				<text class="text">用户设置</text>
				<uni-icons type="right" size="20"></uni-icons>
			</view>
			<view class="indent-text" @click="goSet('lianxi')">
				<img src="static/lianxi.png" alt="" style="width: 5vw;margin-right: 2vw;">
				<text class="text">联系反馈</text>
				<uni-icons type="right" size="20"></uni-icons>
			</view>
			<view class="indent-text" @click="goSet('guanyu')">
				<img src="static/guanyu.png" alt="" style="width: 5vw;margin-right: 2vw;">
				<text class="text">关于我们</text>
				<uni-icons type="right" size="20"></uni-icons>
			</view>
		</view>
	</view>
</template>

<script>
import {
	seleceOneAPI
} from '@/api/user.js'
export default {
	data() {
		return {
			data: {
				username: '', //用户昵称
				viptoken: '',
				vipShouJiNum: '',
				askChance: ''
			}
		}
	},
	mounted() {
		this.getAskChance()
	},
	created() {
		// 深拷贝存储的手机号，以避免包含响应式属性
		this.data.viptoken = uni.getStorageSync('viptoken')
		this.data.username = JSON.parse(JSON.stringify(uni.getStorageSync('username')));
		this.data.vipShouJiNum = JSON.parse(JSON.stringify(uni.getStorageSync('vipShouJiNum')));
	},
	methods: {
		// 点击登录
		async getAskChance() {
			const phone = uni.getStorageSync('vipShouJiNum')
			const res = await seleceOneAPI(phone);
			this.data.askChance = res.data.data.askChance; //AI算力
		},
		// login(code) {
		//   //本地存储持久化存储数据
		//   uni.navigateTo({
		//     url: "/subPackages/my/pages/login",
		//   });
		// },
		// goSet(e) {
		//   console.log(76, e);
		//   uni.navigateTo({
		//     url: `/subPackages/my/pages/${e}`,
		//   });
		// },
		// registerSubmit() {
		//   uni.navigateTo({
		//     url: '/pages/my/register'
		//   })
		// }
	}
}
</script>

<style scoped lang="scss">
.my {
	background-color: #f6f6f6;
	height: 100vh;
	width: 100vw;

	.center-login {
		height: 180rpx;
		display: flex;
		align-items: center;
		margin: 0 30rpx;
		background-color: #fff;
		margin-bottom: 5vw;
		border-radius: 2vw;

		.center-login-left {
			// display: flex;
			// align-items: center;

			.header {
				width: 100rpx;
				height: 100rpx;
				margin-left: 40rpx;
				margin-right: 20rpx;

				.img {
					width: 100%;
					height: 100%;
					border-radius: 50%;
				}
			}
		}

		.center-login-right {
			margin-right: 50rpx;
		}

		.icon {
			margin-right: 14rpx;
		}

	}

	// 登录
	.center {
		display: flex;
		justify-content: center;
		padding: 80rpx 140rpx;
		background-color: #eee;

		.login {
			width: 200rpx;
		}

		.sign {
			width: 200rpx;
		}
	}

	.indent {
		background-color: white;
		// height: 150rpx;
		margin: 0 40rpx;
		box-sizing: border-box;
		margin-bottom: 30rpx;
		border-radius: 3vw;

		.indent-text {
			padding: 10px 15px;
			border-bottom: 2rpx solid #eee;
			box-sizing: border-box;
			display: flex;
			align-items: center;

			/* 垂直居中 */
			.text {
				flex: 1;
				/* 占据剩余空间，使 icon 右对齐 */
			}

			.right-icon {
				margin-left: auto;
				/* 推动 icon 贴靠右侧 */
			}

			.left {
				width: 100%;
				font-weight: 500;
				font-size: 36rpx;
				display: flex;
				justify-content: space-between;
			}
		}
	}
}

.Accept {
	display: flex;
	justify-content: space-around;
	background-color: white;
	margin: 0 30rpx;
	box-sizing: border-box;
	margin-bottom: 30rpx;
	text-align: center;

	.Accept-text {
		padding: 5px 15px;
		border-bottom: 2rpx solid #fff;
		box-sizing: border-box;

		.left {
			width: 100%;
			font-weight: 500;
			font-size: 36rpx;
			display: flex;
			justify-content: space-between;
		}
	}
}


.my .expend {
	background-color: #ffffff;
	margin: 0 30rpx;
	margin-bottom: 30rpx;
	border-radius: 6rpx;
	box-shadow: 0rpx 0rpx 1rpx;
	height: 130rpx;
	display: flex;
	justify-content: space-between;
	padding: 20rpx 60rpx;
	box-sizing: border-box;
	text-align: center;
}

.indent .indent-text .order {
	display: flex;
	// padding: 40rpx 60rpx;
	margin-top: 10rpx;
	border-top: 1rpx solid #e3e3e3;
	justify-content: space-between;
	align-items: center;
}

.indent .indent-text .order .purse {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 5px 15px;
	box-sizing: border-box;
}
</style>